import * as THREE from "three";
import { Cache } from "./Cache";
import { Config } from "./Config";
// import anime from 'animejs/lib/anime.es.js';
import AnimeManager from "./AnimeManager";

export class Panel extends THREE.Object3D{
  view:THREE.Mesh;
  constructor(){
    super()
    this.view = new THREE.Mesh(Cache.getPanelGeo(), Cache.getNormalMat());
    // const box = new THREE.Box3().setFromObject(this.view);
    // const size = box.getSize(new THREE.Vector3());
    // this.view.scale.set(Config.CARD_WIDTH / size.z, Config.CARD_HEIGHT / size.y, Config.CARD_DEPTH / size.z);
    this.add(this.view);
  }

  play(){
    // this.view.material = Cache.getChooseMat()
    // console.log(this.view.material)
    AnimeManager.anime({
      targets: (this.view.material as any).color,
      r: 1,
      g: 1,
      b: 1,
      duration: 1200,
      easing: 'easeInOutQuad',
      update: () => {
        (this.view.material as  THREE.MeshBasicMaterial).map!.needsUpdate = true;
        (this.view.material as  THREE.MeshBasicMaterial).needsUpdate = true;
      }
    })
  }
}